import QtQuick 1.1
import com.nokia.meego 1.1
import com.nokia.extras 1.1

Page {
    id: report_P

    Item {
        id: titleField
        height: 56
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: parent.left

        Label {
            id: titleLabel
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            font.capitalization: Font.MixedCase
            font.pixelSize: 36
            height: 40
            width: parent.width - closeButton.width - 40
            text: "Detailed Report: " + appWindow.trip
            elide: Text.ElideRight
        }

        Image {
            id: closeButton
            anchors.verticalCenter: titleField.verticalCenter
            anchors.right: titleField.right
            anchors.rightMargin: 20
            height: titleLabel.height
            fillMode: Image.PreserveAspectFit

            source: "image://theme/icon-m-common-dialog-close"
            smooth: true

            MouseArea {
                id: closeButtonArea
                anchors.fill: parent
                onClicked:  {
                    appWindow.pageStack.pop();
                }
            }
        }
    }

    VisualDataModel {
        id: reportModel

        model: myExpenses
    
        Component {
            id: reportDelegate
            Item {
                width: parent.width
                height:child.height*1 
                anchors{leftMargin: 10; left:parent.left}
                property variant expnsID: model.id
                Column {
                    id: child
                    width: parent.width
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 5
                    Label {
                        text: model.timestamp + ':'
                        color: 'green';
                    }
                    Label {
                        text: model.description;
                        color: 'green';
                    }
                    Label {
                        text: model.amount + ' ( @ '+ model.currency_rate + ' ) paid by ' + myNames[model.account_id]
                        color: 'green';
                    }
                    ListView {
                        id: shareList
                        width: parent.width
                        model: myData.calcShares(expnsID)
                        height: 45*shareList.count
                        delegate: Row {
                            id: shareRow
                            spacing:10 
                            anchors.leftMargin: 10
                            anchors.left: parent.left
                            anchors.rightMargin: 10
                            anchors.right: parent.right
                            height: 40
                            Label {
                                id: name_T
                                text: myNames[index]
                                width: (parent.width - share_T.width)*0.9
                                elide: Text.ElideRight
                                color: 'purple';
                            }
                            Label {
                                id: share_T
                                text: modelData
                                width: 200
                                color: 'purple';
                                horizontalAlignment: Text.AlignRight
                            }
                        }
                        interactive: false
                        spacing: 5
                    }
                }
                Rectangle {
                    anchors.top: child.bottom
                    width: parent.width
                    height: 2
                }
                focus: true
            }
        }
    }
    ListView {
        id: reportList
        anchors {
            top: titleField.bottom
            topMargin: 20
            bottom: buttons.top
            bottomMargin: 10
        }
        width: parent.width

        model: reportModel
        focus: true
        spacing: 10
        clip: true
    }

    ButtonRow {
        id: buttons
        height:50
        platformStyle: ButtonStyle { }
        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 10
        }
        Button {
            id: save_B
            text: "Save"
            onClicked: {
                myData.saveReport(appWindow.trip)
                banner0.text = "Report saved in folder ~/MyDocs/Documents"
                banner0.show()
            }
        }
        Button {
            id: close_B
            text: "Close"
            onClicked: appWindow.pageStack.pop()
        }
    }

}
